<template>
  <div>
    <!-- 图片预览模式 -->
    <el-dialog v-model="imgShow" title="预览" :width="(offsetw + 140) + 'px'" append-to-body>
      <FilePreviewImg v-if="imgShow" :imgUrl="imgUrl"></FilePreviewImg>
    </el-dialog>
    <FilePreviewImg :showWidth="showWidth" :showHeight="showHeight" v-if="!dialogShow && imgShow" :imgUrl="imgUrl">
    </FilePreviewImg>
  </div>
</template>

<script setup>
import FilePreviewImg from "./img.vue";
import { ref, inject } from "vue";
let used = inject("used");
const props = defineProps({
  //是否显示弹窗
  dialogShow: {
    type: Boolean,
    default: true
  },
  //显示宽度
  showWidth: {
    type: Number,
    default: 0
  },
})


let imgShow = ref(false);//是否显示图片预览
let imgUrl = ref('');//图片预览地址
let showHeight = ref(500);
let offsetw = ref(500);//宽度

const show = (url) => {
  //是否图片
  if (used.isImageType(url)) {
    showHeight.value = document.body.offsetHeight * 0.76;
    imgUrl.value = url;
    imgShow.value = true;
  }
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped></style>
